<!--# 
var name = name!"attachement";
var uploadURL = ctxPath+"/core/file/uploadAttachment.json";
var chooseId = name+"List";
var uploadId = name+"ListAction";
var filesListId = name+"DataList";
//加载已经在数据库列表
var files = (isNew=="true")?[]:core.file(batchFileUUID);

-->
<div class="layui-upload">
	<input type="hidden" name="${name}" value="${batchFileUUID}" />
	<button type="button" class="layui-btn layui-btn-normal" id="${chooseId}">选择文件</button>
	<button type="button" class="layui-btn" id="${uploadId}">开始上传</button>
	<span>可用于上传缩略图。先点击“选择图片”，再点击“开始上传”，最后点击“保存”才能生效。</span>
	<div class="layui-upload-list">
		<table class="layui-table">
			<thead>
			<tr>
				<th>编号</th>
				<th>文件名</th>
				<th>标题和链接</th>
				<th>预览</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="${filesListId}">
			<!--# for(file in files){  -->
			<tr>
				<td>${file.id}</td>
				<td>${file.name}</td>
				<td>
					<input type="hidden" name="image-id" value="${file.id }" />
					<input type="text" name="image-title-${file.id}" placeholder="请输入标题" class="layui-input" value="${file.title! }">
					<input type="text" name="image-url-${file.id}" placeholder="请输入链接" class="layui-input" value="${file.url! }">
				</td>
				<td>
					<img class="" style="width: 100%" src="/core/file/inline/${file.id }/${file.name }" />
				</td>
				<td>成功</td>
				<td>

					<button class="layui-btn layui-btn-mini  layui-btn-danger demo-delete">删除</button>
					<button class="layui-btn layui-btn-mini  demo-preview">预览</button>
					<button class="layui-btn layui-btn-mini  demo-download">下载</button>
				</td>
			</tr>
			<!--# }  -->
			</tbody>
		</table>
	</div>
</div>
<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="progress_${name}">
	<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>
<script>
var previewStr = '<button class="layui-btn layui-btn-mini demo-preview">预览</button>';
var deleteStr = '<button class="layui-btn layui-btn-mini  demo-delete layui-btn-danger">删除</button>';
var downloadStr ='<button class="layui-btn layui-btn-mini demo-download">下载</button>'
layui.use(['upload','element'],
function() {
    var $ = layui.jquery,
    upload = layui.upload;
    var element = layui.element;
    var demoListView = $('#${filesListId}'),
    uploadListIns = upload.render({
        elem: '#${chooseId}',
        url: '${uploadURL}',
        accept: 'file',
        multiple: false,
        auto: false,
        number:1,
        data: {
            "batchFileUUID": "${batchFileUUID}",
            "bizId":"${bizId!}",
            "bizType":"${bizType}"
        },
        bindAction: '#${uploadId}',
        choose: function(obj) {
            //var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列，单文件上传需隐藏此语句
            //读取本地文件
            obj.preview(function(index, file, result) {
                var tr = $(['<tr id="${name}Upload-' + index + '">', '<td></td>', '<td>' + file.name + '</td>', '<td><div id="info-' + index + '"></div></td><td></td>','<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload  layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger demo-cancel">取消</button>', '</td>', '</tr>'].join(''));
                //单个重传
                tr.find('.demo-reload').on('click',
                function() {
                    obj.upload(index, file);
                });

                //取消
                tr.find('.demo-cancel').on('click',
                function() {
                    //delete files[index]; //删除对应的文件，单文件上传需隐藏此语句
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.html(tr);
                element.render("progress");//重新渲染进度条
                element.progress("progress_${name}","0%");
            });
        },
        done: function(res, index, upload) {
            if (res.code != 0) {
                this.error(index, upload);
                return
            } //上传成功
            var tr = demoListView.find('tr#${name}Upload-' + index),
            tds = tr.children();
            tds.eq(0).html(res.data.id);
            
            $("#info-"+ index).html('<input type="hidden" value="' + res.data.id + '" name="image-id" /><input type="text" name="image-title-' + res.data.id + '" placeholder="请输入标题" class="layui-input" value=""><input type="text" name="image-url-' + res.data.id + '" placeholder="请输入链接" class="layui-input" value="">');
            
            var path = "http://" + window.location.host+"/core/file/download/"+res.data.id+"/${batchFileUUID}/"+res.data.name;
            tds.eq(3).html('<img src="' + path + '" style="width:100%" />');
            
            tds.eq(4).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(5).html(deleteStr+previewStr +downloadStr); //清空操作
            initTr(tr);
            element.render("progress");//重新渲染进度条
            element.progress("progress_${name}","0%");
            //return delete this.files[index]; //删除文件队列已经上传成功的文件，单文件上传需隐藏此语句
        },
        error: function(index, upload) {
            var tr = demoListView.find('tr#${name}upload-' + index),
            tds = tr.children();
            tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
        },
        progress: function(n, elem,e){
        	console.log(elem);
            var percent = n + '%' //获取进度百分比
            element.progress('progress_${name}', percent); //可配合 layui 进度条元素使用
            
            //console.log(e);
            //以下系 layui 2.5.6 新增
            //console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
          }
    });

    var trs = demoListView.children();
    for (var i = 0; i < trs.length; i++) {
        initTr($(trs[i]));
    }

    function initTr(tr) {
    		var tds = tr.children();
    		var fileId = tds.eq(0).html();
    		var fileName= tds.eq(1).html();
        tr.find('.demo-delete').on('click',function() {
            
            Common.post("/core/file/deleteAttachment.json", {
                "fileId": fileId,
                "batchFileUUID": "${batchFileUUID}"
            },
            function() {
                tr.remove();
                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                Common.info("删除成功");
            });
            return false;

        });
        //预览服务器文件
        tr.find('.demo-preview').on('click',
        function() {
            //文件下载地址
            var path = "http://" + window.location.host+"/core/file/inline/"+fileId+"/"+fileName;
            var file = encodeURIComponent(path);
            //8012为预览服务器地址，参考 https://gitee.com/kekingcn/file-online-preview 安装
            //Common.topOpenDlg(path,fileName+"预览");
            window.open(path,fileName+"预览");
           	return false;
        });
        
        //下载服务器文件
        tr.find('.demo-download').on('click',
        function() {
            //文件下载地址
            var address = "${ctxPath}/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName;
            console.log(address);
           	window.location.href=address;
           	return false;
        });
    }

});
 </script>

